<template>
    <div class="goodscard">
        <div>
            <nut-infiniteloading
                    @loadmore="onInfinite"
                    :is-show-mod="true"
                    :has-more="isHasMore"
                    :is-loading="isLoading"
                    :threshold="200"
            >
                <ul class="list" >
                    <li class="list-item" v-for="(item, index) in goodstableTabs" :key="index" @click="toDetail(item.id)">
                        <img :src="item.goodsimage" width="170px" height="170px;"/>
                        <p>{{item.goodstitle}}</p>
                        <nut-price
                                :price="item.goodsprice"
                                :needSymbol="true"
                                :thousands="false"
                        />
                    </li>
                </ul>
            </nut-infiniteloading>
        </div>
        <!--返回顶部-->
        <nut-backtop :bottom="80" :distance="600"></nut-backtop>
    </div>
</template>

<script>
    export default {
        name: "goodsCard",
        data() {
            return {
                goodstableTabs:[],
                show:false,
                data: new Array(0),
                page: 0,
                num: 10,
                isHasMore: true,
                isLoading: false,
                isErr: false,
                timer: null,
                end:false
            };
        },
        methods: {
            onInfinite () {
                this.isLoading = true;
                this.timer = setTimeout(() => {
                    if(!this.toShowCards()){
                        this.page += 1;
                    }else{
                        this.isHasMore = false;
                    }
                    this.isLoading = false;
                }, 100);
            },
            toShowCards(){
                var param = new URLSearchParams();
                param.append('offset',this.page*this.num );
                param.append('limit',this.num);
                this.$axios.get('/goods/selectByPage',{params:param}).then(
                    res => {
                        if(res.data.code == 200){
                            if(res.data.data.length==0){
                                this.end = true;
                            }
                            this.goodstableTabs = this.goodstableTabs.concat(res.data.data);

                        }
                    }
                );
                return this.end;
            },
            toDetail(id){
                this.$router.push({name:'goodsinfo',query:{'goodsId':id}});
            }
        },
        destroyed() {
            clearTimeout(this.timer);
        },
        props:['imgsrc', 'title', 'price'],
        mounted() {
            this.toShowCards();
        }
    }
</script>

<style scoped>
    .list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
    }
    .list-item{
        width:170px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-radius: 15px;
        overflow: hidden;
        background: #ffffff;
        padding-bottom:5px;
        margin:16px 2.1%;
        box-shadow: 0px 5px 10px #cdcdcd;
    }
    .list-item>p{
        width:100%;
        display: block;
        font-size: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding:0px 3px;
    }
    .list-item>div{
        padding-left:5px;
        color: #c82519;
    }
    >>>.nut-baxcktop{
        bottom:80px;
    }
</style>
